<template>

	<div>
		
			<!-- 向子组件传递数据 -->
		 <el-table
				
		      :data="tableData"
			  size="mini"
		      style="width: 100%">
		      <el-table-column  prop="id"  		label="id"  		align="center" width="180"> </el-table-column>
		      <el-table-column  prop="menuName"  label="菜单名字"  	align="center"> </el-table-column>
		      <el-table-column  prop="url"  	label="路径"  		align="center"> </el-table-column>
		      <el-table-column  prop="url"  	label="操作"  		align="center"> 
					<template  slot-scope="scope">
						
						<el-button type="primary" size="mini" @click="toEdit(scope.row)">修改</el-button>
						<el-button type="waring" size="mini">删除</el-button>
					</template>
				
			  </el-table-column>
		      
		    </el-table>
			
			<el-dialog title="菜单编辑" :visible.sync="visable" >
			
				<edit :visible.sync="visable" :form="form"></edit>
				
			</el-dialog>
			
			
	</div>
	
	
</template>

<script>
	import edit from './edit';
	export default{
		name:'Menu',
		components:{edit},
		data(){
			return {
				visable:false,
				form:{
					
				},
				 tableData: [
					 { id: '1', menuName: '权限管理', url: '/ums/user'  },
					 { id: '2', menuName: '用户管理', url: '/ums/user'  },
					 { id: '3', menuName: '角色管理', url: '/ums/role'  },
					 { id: '4', menuName: '菜单管理', url: '/ums/menu'  },
					 { id: '4', menuName: '菜单管理', url: '/ums/menu'  },
					 { id: '4', menuName: '菜单管理', url: '/ums/menu'  },
					 { id: '4', menuName: '菜单管理', url: '/ums/menu'  },
					 { id: '4', menuName: '菜单管理', url: '/ums/menu'  },
					 { id: '4', menuName: '菜单管理', url: '/ums/menu'  },
					 { id: '4', menuName: '菜单管理', url: '/ums/menu'  },
					 { id: '4', menuName: '菜单管理', url: '/ums/menu'  },
					 { id: '4', menuName: '菜单管理', url: '/ums/menu'  },
					 { id: '4', menuName: '菜单管理', url: '/ums/menu'  },
				  
				  ]
			}
		},
		methods:{
			toEdit(form){
				console.log(form)
				this.form = form;
				this.visable=true
			}
		}
	}
	
	
</script>

<style scoped>
	
	
	
	
</style>